<template>
    <svg class="icon" :class="[size]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" :width="computedSize"
        :height="computedSize" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
        stroke-linejoin="round">
        <template v-if="name === 'arrow-left'">
            <path d="M19 12H5M12 19l-7-7 7-7" />
        </template>
        <template v-else-if="name === 'maximize'">
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
        </template>
        <template v-else-if="name === 'minimize'">
            <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />
        </template>
        <template v-else-if="name === 'play'">
            <polygon points="5 3 19 12 5 21 5 3" />
        </template>
        <template v-else-if="name === 'save'">
            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
            <polyline points="17 21 17 13 7 13 7 21" />
            <polyline points="7 3 7 8 15 8" />
        </template>
    </svg>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    name: {
        type: String,
        required: true
    },
    size: {
        type: String,
        default: 'md'
    }
})

const computedSize = computed(() => {
    const sizes = {
        sm: 16,
        md: 20,
        lg: 24,
        xl: 32
    }
    return sizes[props.size] || sizes.md
})
</script>

<style scoped>
.icon {
    vertical-align: middle;
}

.sm {
    font-size: 16px;
}

.md {
    font-size: 20px;
}

.lg {
    font-size: 24px;
}

.xl {
    font-size: 32px;
}
</style>